import React, { Component, createRef, useRef } from 'react'
import { connect, Dispatch, history } from 'umi'
import { Table, Select, Space, Button } from 'antd'
import { getStateOrder } from '../../service/order'
const { Option } = Select
// {
//     "name": "wjx",
//     "tel": "15663597611",
//     "province": "黑龙江省",
//     "city": "哈尔滨市",
//     "county": "道外区",
//     "addressDetail": "团结",
//     "orderid": "order_3f5da6ff-0f18-4162-be66-40592b8f2987",
//     "userid": "user_6bef3f85-3dd1-4467-8ef1-ef91dd26e0f7",
//     "status": 2,
//     "proname": "米家直驱洗烘一体机",
//     "proid": "pro_039c15a3-09a9-441d-8dfa-bd54acdd587d",
//     "originprice": 2999,
//     "img1": "http://img12.360buyimg.com/n1/jfs/t1/125178/7/16502/43895/5f9a653cEb261b37f/feebe84826ae1cfc.jpg",
//     "discount": 9,
//     "num": 1,
//     "time": "1617347709683"
// },

class order extends Component {
    constructor(props: any) {
        super(props)
    }
    state = {
        orderList: [],
        selValue: -1
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'order/getOrderW'
        })
        console.log(this.state.selValue);
        
    }
    sure = React.createRef()
    render() {
        let height = 0
        let width = 0
        const h = document.getElementsByTagName('html')
        height = h[0].clientHeight
        width = h[0].clientWidth
        const { orderList, dispatch } = this.props
        const columns: any = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'name',
                key: 'name',
                width: 120,
                ellipsis: true,
            },
            {
                title: '手机号',
                align: 'center',
                dataIndex: 'tel',
                key: 'tel',
                width: 120,
                ellipsis: true,
            },
            {
                title: '订单状态',
                align: 'center',
                dataIndex: 'status',
                ellipsis: true,
                key: 'status',
                width: 120,
                render(text:any){
                    return (
                        <>
                            {(()=>{
                                switch (text) {
                                    case 0:
                                        return '未支付'
                                    case 1:
                                        return '待发货'
                                    case 2:
                                        return '待收货'
                                    case 3:
                                        return '待评价'
                                    case 4:
                                        return '已完成'
                                    default:
                                        break;
                                }
                            })()}
                        </>
                    )
                }
            },
            {
                title: '商品名称',
                align: 'center',
                dataIndex: 'proname',
                key: 'proname',
                width: 160,
            },
            {
                title: '订单时间',
                align: 'center',
                dataIndex: 'time',
                key: 'time',
                width: 160,
                render(text:any){
                    return (
                        <div>
                            {/* <p>{text}</p> */}
                        <p>{new Date(Number(text)).toLocaleString().replace(/:\d{1,2}$/,' ')}</p>
                        </div>
                    )
                }
            },
            {
                title: '省份',
                align: 'center',
                dataIndex: 'province',
                key: 'province',
                ellipsis: true,
                width: 120,
            },
            {
                title: '市',
                align: 'center',
                dataIndex: 'city',
                key: 'city',
                ellipsis: true,
                width: 120,
            },
            {
                title: '区',
                align: 'center',
                dataIndex: 'county',
                key: 'county',
                ellipsis: true,
                width: 120,
            },
            {
                title: '详细地址',
                align: 'center',
                dataIndex: 'addressDetail',
                ellipsis: true,
                key: 'addressDetail',
                width: 120,
            },
            {
                title: '订单id',
                align: 'center',
                dataIndex: 'orderid',
                ellipsis: true,
                key: 'orderid',
                width: 120,
            },
            {
                title: '用户ip',
                align: 'center',
                dataIndex: 'userid',
                ellipsis: true,
                key: 'userid',
                width: 120,
            },
            {
                title: '商品id',
                align: 'center',
                dataIndex: 'proid',
                key: 'proid',
                width: 160,
            },
            {
                title: '商品图片',
                align: 'center',
                dataIndex: 'img1',
                key: 'img1',
                width: 160,
            },
            {
                title: '商品价格',
                align: 'center',
                dataIndex: 'originprice',
                key: 'originprice',
                width: 160,
            },
            {
                title: '折后价格',
                align: 'center',
                dataIndex: 'discount',
                key: 'discount',
                width: 160,
            },
            {
                title: '购买数量',
                align: 'center',
                dataIndex: 'num',
                key: 'num',
                width: 160,
            },
            {
                title: '操作',
                fixed: 'right',
                width: 180,
                align: 'center',
                render(text: null, record: any, index: number) {
                    return (
                        <Space>
                            <Button type="ghost" onClick={()=>{
                                history.push({ pathname: '/order/changeOrder', state: {orderid:record['orderid']}})
                            }}>编辑</Button>
                        </Space>
                    )
                }
            }
        ];
        return (
            <div>
                <Select placeholder="请选择分类" onChange={(e)=>{
                    // console.log(orderList,this.state.orderList);   
                    this.setState({
                        selValue: Number(e)
                    })    
                }} style={{ width: 200}}>
                    <Option value='-1'>全部</Option>
                    <Option value='0'>未支付</Option>
                    <Option value='1'>待发货</Option>
                    <Option value='2'>待收货</Option>
                    <Option value='3'>待评价</Option>
                    <Option value='4'>已完成</Option>
                </Select>
                <Button onClick={
                    ()=>{
                        console.log(this.state.selValue,'mm');
                        
                        if(this.state.selValue === -1){
                            this.props.dispatch({
                                type: 'order/getOrderW'
                            })
                            console.log(123);
                        } else {
                            getStateOrder({status:this.state.selValue}).then(res=>{
                                const arr = JSON.parse(JSON.stringify(res.data))
                                this.setState({
                                    orderList: arr
                                })
                                console.log(this.state.orderList);
                            })
                        }
                    }
                }>搜索</Button>
                <Table dataSource={this.state.orderList.length === 0 ? orderList : this.state.orderList} columns={columns} rowKey="orderid" />;
            </div>
        )
    }
}
export default connect(state => {
    return {
        orderList: state.order.orderList
    }
})(order)